<%@ page language="java" pageEncoding="UTF-8"%>
<%@page import="framelib.common.FrameCommon"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@include file="includes/import.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript"
			src="<%=basePathHeader%>/JAVAScripts/common/jquery.Jcrop.js">
		</script>
		<link rel="stylesheet" href="<%=basePathHeader%>/styles/common.css"
			type="text/css" />
		<link rel="stylesheet"
			href="<%=basePathHeader%>/styles/jquery.Jcrop.css" type="text/css" />
		<script type="text/javascript"
			src="<%=basePathHeader%>/JAVAScripts/common/fileUpload.js">
			</script>
		<script type="text/javascript"
			src="<%=basePathHeader%>/JAVAScripts/common/jquery.form.js">
			</script>
		<link rel="stylesheet" href="<%=basePathHeader%>/styles/userAvatar.css"
			type="text/css" />
<script type="text/javascript" language="javascript">
function showImage(file,width,height) {
  	$("#crop_preview").attr("src", imagePath+file+"?"+Math.random());
  	$("#crop_preview_mid").attr("src", imagePath+file+"?"+Math.random());
  	$("#crop_preview_sma").attr("src", imagePath+file+"?"+Math.random());
  	if(height == null || height == "" || height == "null"){
  		$("#divimage").html("<img id='userAvatar' width='"+ width +"' src='"+ imagePath+file +"?' />");
  	}
  	if(width == null || width == "" || width == "null"){
  		$("#divimage").html("<img id='userAvatar' height='"+ height +"' src='"+ imagePath+file +"?' />");
  	}
	
	$("#userAvatar").src = imagePath+file+"?"+Math.random();
	$("#userAvatar").load();
	$("#filePath").val(file);
	$("#userAvatar").Jcrop( {
			onChange : showPreview,
			onSelect : showPreview,
			aspectRatio : 1
		});
		//简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
		function showPreview(coords) {
			if (parseInt(coords.w) > 0) {
				//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
				var rx = $("#preview_box").width() / coords.w;
				var ry = $("#preview_box").height() / coords.h;
				var rx_m = $("#preview_box_mid").width() / coords.w;
				var ry_m = $("#preview_box_mid").height() / coords.h;
				var rx_s = $("#preview_box_sma").width() / coords.w;
				var ry_s = $("#preview_box_sma").height() / coords.h;
				//通过比例值控制图片的样式与显示
				$("#crop_preview").css( {
					width : Math.round(rx * $("#userAvatar").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积
					height : Math.round(rx * $("#userAvatar").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积
					marginLeft : "-" + Math.round(rx * coords.x) + "px",
					marginTop : "-" + Math.round(ry * coords.y) + "px"
				});
				//通过比例值控制图片的样式与显示
				$("#crop_preview_mid").css( {
					width : Math.round(rx_m * $("#userAvatar").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积
					height : Math.round(rx_m * $("#userAvatar").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积
					marginLeft : "-" + Math.round(rx_m * coords.x) + "px",
					marginTop : "-" + Math.round(ry_m * coords.y) + "px"
				});
				//通过比例值控制图片的样式与显示
				$("#crop_preview_sma").css( {
					width : Math.round(rx_s * $("#userAvatar").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积
					height : Math.round(rx_s * $("#userAvatar").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积
					marginLeft : "-" + Math.round(rx_s * coords.x) + "px",
					marginTop : "-" + Math.round(ry_s * coords.y) + "px"
				});
			}
			$("#x1").val(coords.x);
			$("#y1").val(coords.y);
			$("#x2").val(coords.x2);
			$("#y2").val(coords.y2);
			$("#w").val(coords.w);
			$("#h").val(coords.h);
		}
}
function imageSubmit(){
	var options = {
	      url: '<%=basePathHeader %>/user/saveUserAvatar.htm',
	      type: 'post',
	      data: $('#filePath').serialize(),
	      success: function(data) {
			if(data == 'success'){
				$('#uploadMessage').html("头像保存成功");
			}
	      },
	      fail : function(){$('#uploadMessage').html("请选择头像区域");}
    	}
		if($("#x1").val() == null){
			$('#uploadMessage').html("请选择头像区域");
			return false;
		}
		$('#cutImage').ajaxSubmit(options); 
}
</script>

	</head>

	<body>
		<c:import url="includes/header.jsp" />

		<div class="info">
			<c:import url="includes/userLeft.jsp" />
			<div class="right">
				<div class="zxx_out_box">
					<div class="zxx_in_box">
						<div class="zxx_main_con">
							<div class="zxx_test_list">
								<div class="rel mb20">
									<form method="post" id="userAvatarUpload" name="userAvatarUpload" action="<%=basePathHeader %>/user/userAvatarUpload.htm"
										enctype="multipart/form-data"
										onsubmit="DelEmpty();return true;">
										<div style="width: 100px; height: 30px; background-image: url(<%=basePathHeader%>/images/all_toolbar.gif); background-position: 2px -64px; margin: 6px 4px; border: 1px solid #bebebe; cursor: pointer;_margin-left:-480px">
											<a id="UpFilePanelHidden" href="javascript:void(0);"></a>
										</div>
										<div id="UpFilePanelShow"></div><div id="uploadMessage" style="width: 300px;text-align: left;color: red;_margin-left:-280px"></div>
										<script>AddFiles();</script>
									</form>
									<div id="divimage" style="float:left">
										<img id="userAvatar" width="400"
											src="<%=basePathHeader%>/images/avatar.jpg" />
									</div>
									<span class="crop_preview_title">大头像 180*180</span>
									<span id="preview_box" class="crop_preview"><img
											id="crop_preview" src="<%=basePathHeader%>/images/avatar.jpg" />
									</span>
									<span class="crop_preview_mid_title">中头像 50*50</span>
									<span id="preview_box_mid" class="crop_preview_mid"><img
											id="crop_preview_mid" src="<%=basePathHeader%>/images/avatar.jpg" />
									</span>
									<span class="crop_preview_sma_title">小头像30*30</span>
									<span id="preview_box_sma" class="crop_preview_sma"><img
											id="crop_preview_sma" src="<%=basePathHeader%>/images/avatar.jpg" />
									</span>
								</div>
							</div>
						</div>
						<form id="cutImage" action="<%=basePathHeader %>/user/saveUserAvatar.htm" method="post">
							<input type="hidden" size="4" id="filePath" name="filePath" />
							<input type="hidden" size="4" id="x1"  name="x1" />
							<input type="hidden" size="4" id="y1"  name="y1" />
							<input type="hidden" size="4" id="x2"  name="x2" />
							<input type="hidden" size="4" id="y2"  name="y2" />
							<input type="hidden" size="4" id="w"  name="w" />
							<input type="hidden" size="4" id="h"  name="h" />
							<span class="reg_infobtn" onclick="imageSubmit()"></span>
						</form>
					</div>
				</div>
				
			</div>
		</div>
		<c:import url="includes/footer.jsp" />
	</body>
</html>
